<template>
  <div>
    <el-button type="primary" size="mini" style="width: 60px;margin-left: 50px;margin-top: 20px;margin-bottom: 10px"
               @click="closePage">返回
    </el-button>
    <el-row :gutter="20">
      <el-form ref="elForm" disabled style="padding: 0 50px" size="small" label-position="top"
               label-width="50px">
        <el-col :span="8">
          <el-form-item label="填报人:" prop="title">
            <el-input readonly v-model="formData.submitter"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="安全隐患级别:" prop="safetyHazardLevel">
            <el-input readonly v-model="formData.safetyHazardLevel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标题:" prop="title">
            <el-input readonly v-model="formData.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="整改状态:" prop="statetype">
            <el-input readonly v-model="formData.statetype">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发现时间:" prop="title">
            <el-input readonly v-model="formData.findtime"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预计整改完成时间:" prop="findtime">
            <el-input readonly v-model="formData.completetime"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="整改完成时间:" prop="findtime">
            <el-input readonly v-model="formData.updateTime"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="隐患图片:" prop="findtime">
            <el-image v-if="fileUrl != null"
                      style="width: 150px; height: 150px; border-radius: 10px;"
                      :src="fileUrl"
                      :preview-src-list="srcList">
            </el-image>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="安全隐患原因:" prop="safetyHazardReason" style="position: relative;">
            <!--            <div ref="content1" class="content" :style="{'height': open1 ? '100%' : '140px' }"-->
            <!--                 v-html="formData.safetyHazardReason">-->
            <!--            </div>-->
            <el-input readonly
                      v-model="formData.safetyHazardReason"
                      type="textarea"
            />
            <div class="hide-preCode-box" :style="{'display': open1 ? 'none' : ''}" @click="open1 =! open1">
              <span class="hide-preCode-bt"><i class="el-icon-arrow-down"></i></span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item class="el-form--label-top" label="隐患整改措施:" prop="hazardCopeMeasures"
                        style="position: relative;">
            <!--            <div ref="content2" class="content" :style="{'height': open2 ? '100%' : '140px' }"-->
            <!--                 v-html="formData.hazardCopeMeasures">-->
            <!--            </div>-->
            <el-input readonly
                      v-model="formData.hazardCopeMeasures"
                      type="textarea"
            />
            <div class="hide-preCode-box" :style="{'display': open2 ? 'none' : ''}" @click="open2 =! open2">
              <span class="hide-preCode-bt"><i class="el-icon-arrow-down"></i></span>
            </div>
          </el-form-item>
        </el-col>

        <el-col v-if="formData.uploadFileList.length > 0" :span="24">
          <el-form-item label="附件:" prop="uploadFileList">
            <el-upload :disabled="true" ref="upload" :file-list="formData.uploadFileList" :auto-upload="false"
                       action="#" :on-preview="handlePreview">
            </el-upload>
          </el-form-item>
        </el-col>

      </el-form>
    </el-row>
  </div>
</template>
<script>
import {
  parseTime,
  selectDictLabel
} from "@/utils/ruoyi";
import {
  getToken
} from "@/utils/auth";

import {
  getReporting
} from "@/api/patrol/reporting";

export default {
  props: [],
  data() {
    return {
      fileUrl: null,
      srcList: [],
      number: 0,
      Authorization: {
        Authorization: getToken()
      },
      reportingId: null,
      formData: {
        //安全隐患级别
        safetyHazardLevel: null,
        //安全隐患原因
        safetyHazardReason: '',
        //隐患整改措施
        hazardCopeMeasures: '',
        //文件上传路径
        uploadFileList: [],
        //标题
        title: ''
      },
      uploadTheAddress: process.env.VUE_APP_BASE_API,
      customToolbar: [
        []
      ],
      open1: true,
      open2: true,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.reportingId = this.$route.query.id;
  },
  mounted() {
    if (this.reportingId !== "false") {
      getReporting(this.reportingId).then(res => {
        let data = res.data;
        this.getDicts("safety_hazard_level").then(response => {
          this.formData.safetyHazardLevel = selectDictLabel(response.data, data
            .safetyHazardLevel);
          this.formData.title = this.formatTitle(data.createTime, data.schoolName, this.formData
            .safetyHazardLevel);
        });
        this.formData.safetyHazardReason = data.safetyHazardReason;
        this.formData.hazardCopeMeasures = data.hazardCopeMeasures;
        this.formData.submitter = data.submitter;
        this.formData.findtime = data.findtime;
        this.formData.updateTime = parseTime(data.updateTime, '{y}-{m}-{d}');
        this.fileUrl = data.fileUrl;
        if (this.fileUrl != null)
          this.srcList = [data.fileUrl]
        this.formData.completetime = data.completetime;
        this.formData.statetype = data.statetype == 1 ? "整改完成" : data.statetype == 0 ? "整改中" : "未整改";
        if (data.fileUrl) {
          let urlList = data.fileUrl.split(',');
          urlList.forEach(element => {
            this.imgfileList = [{
              name: element.split('_')[1],
              url: this.uploadTheAddress + element
            }];
          });
        }
        if (data.filePath) {
          let urlList = data.filePath.split(',');
          urlList.forEach(element => {
            this.formData.uploadFileList = [{
              name: element.split('_')[1],
              url: this.uploadTheAddress + element
            }];
          });
        } else {
          this.formData.uploadFileList = [];
        }
        // this.$nextTick(() => { //页面渲染完成后的回调
        //   if (this.$refs.content1.offsetHeight > 140) {
        //     this.open1 = !this.open1
        //   }
        //   if (this.$refs.content2.offsetHeight > 140) {
        //     this.open2 = !this.open2
        //   }
        // })
      });
    }
  },
  methods: {
    handlePreview(file) {
      const a = document.createElement('a')
      a.setAttribute('download', file.name)
      a.setAttribute('target', '_blank')
      a.setAttribute('href', file.url)
      a.click()
    },
    //关闭页面
    closePage() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$tab.openPage("安全隐患上报", "/patrol/reporting");
    },
    formatTitle(date, school, level) {
      date = date.split(" ")[0].split("-");
      if (date[1] - '0' < 10) {
        date[1] = date[1] - '0';
      }
      if (date[2] - '0' < 10) {
        date[2] = date[2] - '0';
      }
      date = date[0] + "年" + date[1] + "月" + date[2] + "日";
      return date + school + level + "安全隐患报告";
    },
  }
}

</script>
<style scoped>
.content {
  padding: 0 20px;
  overflow: hidden;
  min-height: 140px;
  background: #0202020a;
}

.hide-preCode-box {
  width: 100%;
  padding-top: 78px;
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.hide-preCode-bt {
  display: block;
  margin: auto;
  width: 44px;
  height: 22px;
  background: #f0f0f5;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding-top: 6px;
  cursor: pointer;
}

.el-icon-arrow-down {
  display: block;
  margin: auto;
  width: 16px;
  height: 16px;
}

.el-upload__tip {
  line-height: 1.2;
  margin-top: 0;
}

::v-deep .el-upload {
  display: none;
}

::v-deep .el-upload-list__item:first-child {
  margin-top: 0;
}


::v-deep .el-upload-list__item,
.is-ready {
  margin-left: 10px;
}

</style>
